<template>
  <div class="btnBContainer" @click="handleClick">{{ props.title }}</div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import { msgbox } from "@/utils/msgboxutils";

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: i18nt.value.business.testCard.btn,
  },

  func: {
    type: Function,
    required: false,
    default: () => {},
  },
});

const handleClick = (_: MouseEvent) => {
  props.func();
  msgbox.success(`${props.title} 被按下！`);
};
</script>

<style scoped lang="scss">
.btnBContainer {
  @include rel_cen_hw(33px, 89px);
  border-radius: 8px 8px 8px 8px;
  background: linear-gradient(117deg, #26f1eb 0%, #2075fc 100%);
  transition: all 0.5s ease;

  font-size: 16px;
  color: #ffffff;

  cursor: pointer;
  &:hover {
    background: linear-gradient(117deg, rgb(32, 117, 252) 0%, #26f1eb 100%);
    transform: scale(1.1);
  }

  &:active {
    transform: scale(0.94);
    box-shadow: 0px 0px 15px 3px rgba(32, 117, 252, 0.09);
  }
}
</style>
